﻿@using RMS.EF.Model
@{
    ViewBag.Title = "DataTables";
    Layout = "~/Areas/Demo/Views/Shared/Demo_Layout.cshtml";
}
<link href="~/bower_components/bootstrap-fileinput-master/css/fileinput.min.css" rel="stylesheet" />

<div class="panel-body">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="searchForm" class="form-inline" role="form" onsubmit="search(); return false;">
                    <div class="form-group">
                        <label for="userName">用户名称</label>
                        <input type="text" class="form-control" id="userName" name="userName" />
                    </div>
                    <div class="form-group">
                        <label for="enable">是否可用</label>
                        <select id="enable" name="enable" class="form-control">
                            <option value="@((int)E_Status.All)">--全部--</option>
                            <option value="@((int)E_Status.Disable)">不可用</option>
                            <option value="@((int)E_Status.Enable)">可用</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">查询</button>
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="toolbar" class="btn-group" role="group" style="margin-bottom:10px;">
            <button type="button" class="btn btn-success" onclick="add()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button type="button" class="btn btn-danger" onclick="multidel()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
            <button type="button" class="btn btn-primary" onclick="exportExcel()">
                <span class="glyphicon glyphicon-download" aria-hidden="true"></span>导出
            </button>
            <button type="button" class="btn btn-info" onclick="importExcel()">
                <span class="glyphicon glyphicon-import" aria-hidden="true"></span>导入
            </button>
            <button type="button" class="btn btn-warning" onclick="download()">
                <span class="glyphicon glyphicon-save" aria-hidden="true"></span>模板
            </button>
        </div>
        <input id="fileInput" name="Filedata" type="file" data-preview-file-type="text" single accept=".xls,.xlsx">
    </div>
    <div class="row">
        <div class="dataTable_wrapper">
            <table class="table table-bordered table-striped table-hover" id="mainTable"></table>
        </div>
    </div>
</div>

@section scripts{
    @Scripts.Render("~/bundles/fileinput")
    <script>
    var tableurl = "@Url.Action("DataTablesGetData")";
    var delurl = "@Url.Action("DataTables_Delete")";
    var editurl = "@Url.Action("DataTables_Edit")";
    var exporturl = "@Url.Action("ExportTable")";
    @*var importimgurl = "@Url.Action("UploadImage")";
    var importexcelurl = "@Url.Action("ImportExcel")";*@
    var importurl = "@Url.Action("DataTables_Upload")";
    var downloadlurl = "@Url.Action("DownloadFile")";
    var table;
    var selected = [];
    //弹窗初始化，表格初始化和上传控件初始化
    $(function () {
        var data = {};
        $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
        table = $("#mainTable").datatablesSet({
            ajax: { url: tableurl, data: data },
            ordering: true,
            order: [[ 1, 'asc' ]],
            columns: [
                      {
                          data: 'Id', title: '<input type="checkbox" id="sel_all" onclick="sel_all()"/>', className: "text-center", orderable: false,width:"10px",
                          createdCell: function (cell, cellData, rowData, row, col) {
                              $(cell).html('<input type="checkbox" id="sel_' + cellData + '" name="selId" value="' + cellData + '" />');
                          }
                      },
                      {
                          data: 'Id', title: 'ID'
                      },
                      {
                          data: 'UserName', title: '用户名称', className: "text-center"
                      },
                      {
                          data: 'Password', title: '密码', className: "text-center", orderable: false
                          , createdCell: function (cell, cellData, rowData, row, col) {
                              $(cell).html("******");
                          }
                      },
                      {
                          data: 'NickName', title: '昵称', className: "text-right"
                      },
                      {
                          data: 'Status', title: '状态', createdCell: function (cell, cellData, rowData, row, col) {
                              switch (cellData) {
                                  case 0:
                                      $(cell).html("不可用");
                                      break;
                                  case 1:
                                      $(cell).html("可用");
                                      break;
                                  default:
                                      break;
                              }
                          }
                      },
                      {
                          data: 'CreationTime', title: '创建日期', createdCell: function (cell, cellData, rowData, row, col) {
                              $(cell).html($.datetime.Format(cellData, 'yyyy-MM-dd hh:mm:ss'));
                          }
                      },
                      {
                          data: 'LastUpdateTime', title: '更新时间', createdCell: function (cell, cellData, rowData, row, col) {
                              $(cell).html($.datetime.Format(cellData, 'yyyy-MM-dd hh:mm:ss'));
                          }
                      },
                      {
                          data: 'Id', title: '操作', orderable: false, className: "text-center", createdCell: function (cell, cellData, rowData, row, col) {
                              $(cell).html('<a href="javascript:void(0);" onclick="edit(\'' + cellData + '\')"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></a>')
                                .append("&nbsp;|&nbsp;")
                                .append('<a href="javascript:void(0);" onclick="del(\'' + cellData + '\')"><span class="glyphicon glyphicon-remove" aria-hidden="true"></a>');
                          }
                      }
            ]
        }).on('xhr.dt', function () {//调用ajax获取数据时清除全选按钮选中状态
            $("#sel_all").prop("checked", false);
        });
        $("#fileInput").fileInputSet_Excel({ uploadUrl: importurl, showBrowse: false })
            .on("fileuploaded", function (event, data, previewId, index) {
                if (data.response.IsSuccess) {
                    table.ajax.reload(null, false);
                    toastr.success('导入成功');
                }
                else {
                    toastr.error(data.response.Message);
                }
            });
    });
    //表格搜索
    function search() {
        var data = {};
        $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
        $("#mainTable").datatablesReAjax(tableurl, data, function () {
            alert("查询完成");
        }, true);
    }
    //删除
    function del(id) {
        $.confirmAjax("确认要删除该数据吗？", { url: delurl, data: { Id: id }, search: function () { table.ajax.reload(null, false); } });
    }
    //新增
    function add() {
        //ShowModal(addurl, {}, "新增用户");
        $.modalBox("新增用户", { url: editurl, search: function () { table.ajax.reload(null, false); } });
    }
    //修改
    function edit(id) {
        $.modalBox("编辑用户", { url: editurl, data: { id: id }, search: function () { table.ajax.reload(null, false); } });
    }
    //Excel导出列表
    function exportExcel() {
        var data = {};
        $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
        var filter = $.param(data);
        location.href = exporturl + '?' + filter;
    }
    //Excel导入数据
    function importExcel() {
        $("#fileInput").click();
    }
    //模板下载
    function download() {
        window.open(downloadlurl);
    }
    //列表全选
    function sel_all() {
        $("#mainTable").find("input:checkbox").each(function () {
            $(this).prop("checked", $("#sel_all").is(':checked'));
        });
    }
    //批量删除(其他批量操作也可参考)
    function multidel() {
        var selarry=[];
        $("input:checkbox[name='selId']:checked").each(function () {
            selarry.push($(this).val());
        });
        if (selarry.length>0) {
            var selId = selarry.join("','");
            $.confirmAjax("确认要删除选择的数据吗？", { url: delurl, data: { id: selId }, search: function () { table.ajax.reload(null, false); } });
        } else {
            toastr.warning('请先选择数据！');
        }

    }
    </script>
}